<template>
    <div class="article-lists">
    <el-card class="mt-4 !border-none mb-[20px]" shadow="never">
        <el-row type="flex">
            <el-col class="flex" :span="6">
                <div class="title">服务商名字：</div>
                <div>{{ info.name }}</div> 
            </el-col>
            <el-col class="flex" :span="16">
                <div class="title">户名：</div>
                <div>{{ info.account_name }}</div> 
            </el-col>
        </el-row>
        <el-row type="flex">
            <el-col class="flex" :span="6">
                <div class="title">对公账户：</div>
                <div>{{ info.account }}</div> 
            </el-col>
            <el-col class="flex" :span="16">
                <div class="title">开户银行：</div>
                <div>{{ info.account_bank }}</div> 
            </el-col>
        </el-row>
    </el-card>
     <el-card class="!border-none" shadow="never">
             <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" label-width="120px">
                 <el-form-item label="创建时间" class="piker">
                     <el-date-picker
                         v-model="queryParams.create_time"
                         type="date"
                         format="YYYY-MM-DD"
                         value-format="YYYY-MM-DD"
                         placeholder="请选择日期"
                     />
                 </el-form-item>
                 <el-form-item label="支付时间" class="piker">
                     <el-date-picker
                         v-model="queryParams.pay_time"
                         type="date"
                         format="YYYY-MM-DD"
                         value-format="YYYY-MM-DD"
                         placeholder="请选择日期"
                     />
                 </el-form-item>
                 <el-form-item label="支付方式">
                     <el-select class="w-[240px]" v-model="queryParams.pay_type">
                         <el-option label="全部" :value="0"/>
                         <el-option label="微信" :value="1"/>
                         <el-option label="支付宝" :value="2"/>
                         <el-option label="钱包" :value="4"/>
                         <el-option label="小程序" :value="5"/>
                     </el-select>
                 </el-form-item>
                 <!-- <el-form-item label="支付状态">
                     <el-select class="w-[240px]" v-model="queryParams.status">
                         <el-option label="全部" :value="0"/>
                         <el-option label="支付成功" :value="1"/>
                         <el-option label="已退款" :value="2"/>
                     </el-select>
                 </el-form-item> -->
                 <el-form-item label="分账状态">
                     <el-select class="w-[240px]" v-model="queryParams.is_separate">
                         <el-option label="全部" :value="0"/>
                         <el-option label="已分账" :value="1"/>
                         <el-option label="未分账" :value="2"/>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="是否补贴">
                     <el-select class="w-[240px]" v-model="queryParams.subsidy_type">
                         <el-option label="全部" :value="0"/>
                         <el-option label="补贴" :value="1"/>
                         <el-option label="否" :value="2"/>
                     </el-select>
                 </el-form-item>
                 <!-- <el-form-item label="订单编号">
                     <el-input
                         class="w-[240px]"
                         v-model="queryParams.sn"
                         clearable
                     />
                 </el-form-item> -->
 
                 <!-- <el-form-item label="服务商名字">
                     <el-input
                         class="w-[240px]"
                         v-model="queryParams.server_name"
                         clearable
                     />
                 </el-form-item> -->
                 <el-form-item>
                     <el-button type="primary" @click="resetPage">查询</el-button>
                     <el-button @click="resetParams">重置</el-button>
                 </el-form-item>
             </el-form>
         </el-card>
         <el-card class="!border-none" shadow="never">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
                <el-tab-pane label="可提现订单" :name="1"></el-tab-pane>
                <el-tab-pane label="未分账订单" :name="2"></el-tab-pane>
                <el-tab-pane label="已提现订单" :name="3"></el-tab-pane>
            </el-tabs>
            <div class="flex mb-[20px]">
                <el-row type="flex">
                    <el-col class="flex w-[200px]" :span="6">
                        <div style="flex-shrink: 0;">可提现金额：¥</div>
                        <div class="title-price">{{ pager.sum_money }}</div> 
                    </el-col>
                </el-row>
                <el-button v-if="activeName == 1" type="primary" @click="onHelp">帮他提现</el-button>
            </div>
             <el-table size="large" v-loading="pager.loading" :data="pager.lists" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                 <el-table-column label="序号" type="index" :index="indexAdd" min-width="90" />
                 <el-table-column label="订单编号" prop="sn" min-width="190" />
                 <el-table-column label="创建时间" prop="create_time" min-width="190" />
                 <el-table-column label="商品名称" prop="good_name" min-width="250" />
                 <el-table-column label="商品类型" prop="good_type_name" min-width="190" />
                 <el-table-column label="付款人" prop="userinfo.realname" min-width="190" />
                 <el-table-column label="付款人手机" prop="userinfo.account" min-width="190" />
                 <el-table-column label="购买数量" prop="userinfo.account" min-width="120">
                     <template #default="{ row }">
                         <div class="flex items-center">
                             <div class="pt-[5px]">✖️</div>
                             <span> {{ row.num }}</span>
                         </div>
                     </template>
                 </el-table-column>
                 <el-table-column label="总金额（元）" prop="sku_info.price" min-width="190" />
                 <el-table-column label="抵扣金额（元）" prop="deduction_price" min-width="190" />
                 <el-table-column label="实际支付（元）" prop="real_money" min-width="190">
                     <template #default="{ row }">
                         <span>{{ (Number(row.real_money) + Number(row.use_money)).toFixed(2) }}</span>
                     </template>
                 </el-table-column>
                 <el-table-column label="支付状态" prop="create_time" min-width="120">
                     <template #default="{ row }">
                         <span v-if="row.status == 1">支付成功</span>
                         <span v-if="row.status == 2">已退款</span>
                     </template>
                 </el-table-column>
                 <el-table-column label="支付方式" prop="pay_type" min-width="120">
                     <template #default="{ row }">
                         <span v-if="row.pay_type == 1">微信</span>
                         <span v-if="row.pay_type == 2">支付宝</span>
                         <span v-if="row.pay_type == 4">钱包</span>
                         <span v-if="row.pay_type == 5">小程序</span>
                     </template>
                 </el-table-column>
                 <el-table-column label="支付时间" prop="pay_time" min-width="190" />
                 <el-table-column label="是否补贴（元）" prop="subsidy_money" min-width="140">
                     <template #default="{ row }">
                         <span v-if="row.subsidy_money > 0">{{ row.subsidy_money }}</span>
                         <span v-else>否</span>
                     </template>
                 </el-table-column>
                 <el-table-column label="分账状态" prop="is_separate" min-width="120" >
                     <template #default="{ row }">
                         <span v-if="row.is_separate == 1">已分账</span>
                         <span v-if="row.is_separate == 0">未分账</span>
                     </template>
                 </el-table-column>
                 <el-table-column label="分账收益" prop="separate_price" min-width="120" >
                     <template #default="{ row }">
                         <span v-if="row.is_separate == 1">{{ row.separate_price }}</span>
                         <span v-if="row.is_separate == 0">-</span>
                     </template>
                 </el-table-column>
                 <el-table-column label="收益状态" prop="is_withdraw" min-width="120" >
                     <template #default="{ row }">
                         <span v-if="row.is_withdraw == 1">已提现</span>
                         <span v-if="row.is_withdraw == 0">待提现</span>
                     </template>
                 </el-table-column>
                 <el-table-column label="操作" width="200" fixed="right">
                     <template #default="{ row }">
                         <el-button v-perms="['server.server/orderInfo']" type="primary" link >
                             <router-link :to="{ path: getRoutePath('server.server/orderInfo'), query: { id: row.id } }" > 查看 </router-link>
                         </el-button>
                         <el-button v-if="row.status == 1 && row.is_separate == 0" v-perms="['server.server/backMoney']" type="danger" link @click="handleBack(row)">退款</el-button>
                         <el-button v-if="row.is_separate == 0 && row.status == 1" v-perms="['server.server/fenzhang']" type="success" link @click="handleFenzhang(row)">一键分账</el-button>
                     </template>
                 </el-table-column>
             </el-table>
             <div class="flex justify-end mt-4">
                 <pagination v-model="pager" @change="getLists" />
             </div>
         </el-card>
         <back_demand v-model:show="checkState.show" :value="checkState.value" @confirm="handleConfirmCheck"></back_demand>
         <!-- 提现弹窗 -->
        <el-dialog
            v-model="dialogVisible"
            title="提现"
            width="500"
        >
            <div>
            提现金额： ¥<span class="price">{{ price }}</span>
            </div>
            <div class="price-bold">提现账户</div>
            <div>对公账户：{{ info.account }}</div>
            <div>户名：{{ info.account_name }}</div>
            <div>开户银行：{{ info.account_bank }}</div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" v-prevent-reclick="3000" @click="onHelpRight">帮他提现</el-button>
                </div>
            </template>
        </el-dialog>
     </div>
 </template>
 <script setup lang="ts">
import { serverOrderList, backMoney, fenzhang, withdrawOrder } from '@/api/service';
import { usePaging } from '@/hooks/usePaging';
import {getRoutePath} from '@/router'
import feedback from '@/utils/feedback';
import back_demand from './back_demand.vue'
const checkState = reactive({
    show: false,
    value: '',
    status: ''
})

//新增切换
const activeName = ref(1)
const handleClick = (val: any) => {
    queryParams.type = val
    getLists()
}

const route = useRoute()
const info = reactive({
    id: route.query.id,
    name: route.query.name,
    account: route.query.account,
    account_bank: route.query.account_bank,
    account_name: route.query.account_name,
    money: route.query.money,
})
const queryParams:any = reactive({
//  status: 0,
    create_time: '',
    pay_time: '',
    pay_type: 0,
    subsidy_type: 0,
    is_separate: 0,
    server_id: '',
    type: 1
//  sn: '',
//  server_name: ''
})
// 切页序号变化
const indexAdd = (index: number) => {
    const page = pager.page // 当前页码
    const pagesize = pager.size // 每页条数
    return index + 1 + (page - 1) * pagesize
}
queryParams.server_id = route.query.id;
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: serverOrderList,
    params: queryParams
})
if (route.query.sn) {
    queryParams.sn = route.query.sn
}
getLists()

// 退款
const handleBack = (row:any) => {
    checkState.show = true;
    checkState.value = row.id;
}
const handleConfirmCheck = async (value : any) => {
    console.log(value)
    await backMoney(value)
    checkState.show = false;
    getLists()
}
// 分账
const handleFenzhang = async (row:any) => {
    await feedback.confirm('是否确认分账','一键分账')
    await fenzhang({
        id: row.id
    })
    feedback.msgSuccess('分账成功')
    getLists()
}
const multipleSelection:any = ref([])
const handleSelectionChange = (val:any) => {
    multipleSelection.value = val;
}
const price = ref(0)
const help_ids = ref([])
const onHelp = () => {
    console.log(multipleSelection.value)
    if (multipleSelection.value.length == 0) {
        feedback.msgError('请先选择要提现的订单')
        return false;
    }
    let ids:any = []
    price.value = 0
    multipleSelection.value.forEach((item:any)=>{
        ids.push(item.id)
        price.value += Number(item.separate_price)
    })
    console.log(ids)
    console.log(price.value)
    help_ids.value = ids;
    dialogVisible.value = true;
}

const dialogVisible = ref(false)
const onHelpRight = async () => {
    await withdrawOrder({
        ids: help_ids.value.join(',')
    })
    dialogVisible.value = false;
    getLists()
    feedback.msgSuccess('提现成功')
}
 
 </script>
 <style lang="scss" scoped>
 .piker{
     width: 360px;
     ::v-deep .el-input__wrapper{
         width: 240px;
     }
 }
 .flex{
    display: flex;
    height: 30px;
    line-height: 30px;
}
.title{
    color: #ccc;
}
.title-price{
    color: var(--el-color-primary);
    margin-left: 5px;
    font-size: 20px;
}
.price{
    font-size: 24px;
    font-weight: bold;
}
.price-bold{
    font-size: 16px;
    font-weight: bold;
}
 </style>